<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .container{
            width: 1300px;
            height: 600px;
            margin: 20px auto;
            position: relative;
        }

        .header_hea{
            width: 100%;
            line-height: 50px;
            font-size: 21px;
            padding-left: 30px;
            color: forestgreen;
        }

        .header_hea a{
            text-decoration: none;
            color: orangered;
            position: relative;
        }

    /*    做一个伪类边框*/
        .header_hea:before{
            content: '';
            height: 44px;
            left: 0;
            right: 0;
            border: 3px dashed dodgerblue;
            position: absolute;
        }

    /*    中部*/
        .main_mat{
            width: 100%;
            height: 550px;
        }

        .mat_left{
            width: 20%;
            height: 550px;
            float: left;
            text-align: center;
        }

        .mat_left a{
            text-decoration: none;
            color: dodgerblue;
            font-size: 21px;
            line-height: 70px;
            position: relative;
            display: block;
        }

        .mat_left:before{
            content: '';
            height: 550px;
            left: 0;
            right: 80%;
            border-left: 3px dashed dodgerblue;
            border-right: 3px dashed dodgerblue;
            border-bottom: 3px dashed dodgerblue;
            position: absolute;
        }

        .mat_right{
            width: 80%;
            height: 550px;
            float: right;

        }

        .mat_right:before{
            content: '';
            height: 550px;
            left: 20%;
            right: 0;
            border-right: 3px dashed dodgerblue;
            border-bottom: 3px dashed dodgerblue;
            position: absolute;
        }

        .mat_list{
            width: 80%;
            overflow: hidden;
            margin: 20px auto;
            position: relative;
        }
        .mat_list label{
            width: 26.666%;
            display: inline-block;
            line-height: 45px;
            font-size: 18px;
        }

    /*    表*/
        .mat_border{
            width: 80%;
            overflow: hidden;
            margin: 20px auto;
            position: relative;
            text-align: center;
            background-color: lightsalmon;
        }

        .mat_border table td{
            padding: 7px 0;
        }

    </style>
</head>
<body>
<!--大区域-->
<div class="container">
<!--    头部区域-->
    <div class="header_hea">
        欢迎学号/工号：<%= uid %>用户，使用学生管理系统发，当前您的职务是：<%= pname%>&nbsp;【<a href="/logout">退出登录</a>】
    </div>

<!--    中部区域-->
    <div class="main_mat">
            <div class="mat_left">
                <a href="/chenck">更改登录密码</a>
            </div>
<!--        右边显示区域-->
        <div class="mat_right">
<!--            显示-->
            <div class="mat_list">
                <label>姓名：<%= res[0].stu_name %></label>
                <% if(res[0].gender == 1){ %>
                    <label>性别：<%= '男' %></label>
                <% }else{%>
                    <label>性别：<%= '女' %></label>
                <% }  %>
                <label>年龄：<%= res[0].age %></label>
                <hr />
                <label>出生年月：<%= moment(res[0].birtmp).format('Y-MM') %></label>
                <label>所在专业：<%= res[0].sub_name %></label>
                <hr />
            </div>
<!--表-->
            <div class="mat_border">

                <table cellpadding="0" cellspacing="0" style="width: 100%;margin: 15px auto;">
                    <% scores.forEach( (item , index)=>{ %>
                        <tr align="cneter" >
                            <td colspan="6" style="color: white;">第<%= index+1 %>个学期期末成绩</td>
                        </tr>

                        <tr align="cneter">
                            <% item.forEach( (list)=>{ %>
                            <td style="background-color: white;">
                                <%= list.class_name %>
                            </td>
                            <td style="background-color: white;">
                                <%= list.scores %>
                            </td>
                            <% } ) %>
                        </tr>

                    <% } ) %>
                </table>

            </div>
        </div>
    </div>
</div>
</body>
</html>